<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="wrap">
        <h2 id="title">hello</h2>
        <ul class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
    </div>
</body>
<script>
    // 批量操作元素  => 

    // 批量操作元素
    // 可以实现: 批量获取元素,操作元素改变内容 样式 绑定事件 新增/删除属性
    // 对上述操作进行封装 => 面向对象版    =>  最终目的:模拟封装一个javascript库(jquery)


    // 操作 #title  .list>li改变内容
    // 1. 获取元素
    // 2. 改变元素的内容

    // 单元素
    // var title = document.getElementById("title");
    // title.innerText = "world";

    // 多元素
    // var lis = document.querySelectorAll(".list li");
    // for(var i=0;i<lis.length;i++){
    //     var li = lis[i];
    //     li.innerText = "你好";
    // }

    // 对比发现,单元素 => 直接操作元素  多元素=> 循环遍历,在操作元素

    // 批量操作元素前都需要先获取元素 => 针对单元素和多元素这一块 => 进行优化(统一)  => 全都使用document.queryselectorAll 获取元素  => 被获取的元素都存储到集合中 => 统一遍历操作即可



    // var getEle = {
    //     // 需要操作的元素(获取元素) 
    //     eles:document.querySelectorAll(".list li"),
    //     // 操作元素
    //     getText:function(){ // this ->getEle
    //         // 默认获取集合中的第一个 
    //         return this.eles[0].innerText;
    //     },
    //     setText:function(con){
    //         for(var i=0;i<this.eles.length;i++){
    //             var ele = this.eles[i];
    //             ele.innerText = con;
    //         }
    //     }
    // }

    // getEle.setText("abcdef");
    // console.log(getEle.getText());


    // selector 接收一个css选择器(字符串) => 用户获取元素
    function getEle(selector) {
        var obj = {
            // 需要操作的元素(获取元素) 
            eles: document.querySelectorAll(selector),
            // 操作元素
            getText: function () { // this ->getEle
                // 默认获取集合中的第一个 
                return this.eles[0].innerText;
            },
            setText: function (con) {
                for (var i = 0; i < this.eles.length; i++) {
                    var ele = this.eles[i];
                    ele.innerText = con;
                }
            }
        }
        return obj;
    }

    var $title = getEle("#title")
    console.log($title);
    $title.setText("123123")


    var $lis = getEle(".list li")
    console.log($lis);
    $lis.setText("456456")





</script>

</html>